<template>
	<div class="hello">
		<button @click="getdata()">vue-axios</button>
		<br />
		<input v-model="menuname" />
		<button @click="myapidata()">vue-axios</button><br />
		<button @click="alladd()">vue-axios</button>
		<button @click="alladddata()">tp5data</button>
		<button @click="menuadddata()">menuadddata</button>

		<br />
		改进版：vue-cli4，vue-axios（解决跨域），vue-router，vueX，图片懒加载，点击大图，SCSS
		<br />
		<p>只引入这些插件</p>
	</div>
</template>

<script>
import { menu_add } from '../api/insert';

export default {
	name: 'HelloWorld',
	data() {
		return {
			msg: 'Welcome to Your Vue.js App',
			age: '12',
			logo: 'logo',
			listdata: [{ name: 'aaa', age: 16 }, { name: 'bbb', age: 17 }, { name: 'ccc', age: 19 }],
			menulist: [],
			form_menu: {
				id: '',
				type_id: '',
				type_name: '',
				cp_name: '',
				zuofa: '',
				texing: '',
				tishi: '',
				tiaoliao: '',
				yuanliao: ''
			},
			menuname:''
			// listdata: {name:'aaa',age:16 }
		};
	},
	mounted() {
		console.log(this.$store.state);
		this.$store.commit('showMe', this.msg);
		this.$store.commit('showAge', this.age);
		console.log(this.$store.state);
		console.log(JSON.stringify(this.listdata));

		this.menulist = JSON.parse(localStorage.getItem('menulist'));

		console.log(this.menulist);
	},
	methods: {
		//Axios使用 使用箭头函数，不然this指针会变化
		getdata: function() {
			//  前面必须加  /api  这个是代理
			var api = '/api/simpleWeather/query?city=汕头&key=cffde7935527bd85911420cc8e46ee36';
			this.axios
				.get(api)
				.then(res => {
					console.log(res);
				})
				.catch(err => {
					console.log(err);
				});
		},
		myapidata() {
			// 如果后端做了跨域，那vue就不用了
			var api = 'http://api.tianapi.com/txapi/caipu/index?key=6e5c6d6d42cd91d3859c1f746b014e63&word='+this.menuname+'&num=30';
			this.axios
				.get(api)
				.then(res => {
					console.log(res);
					this.menulist = res.data.newslist;
					localStorage.setItem('menulist', JSON.stringify(this.menulist));
					console.log(this.menulist);
				})
				.catch(err => {
					console.log(err);
				});
		},
		alladd() {
			// 如果后端做了跨域，那vue就不用了
			var api = 'http://myapi.com/index.php/index/api/student_alladd';
			this.axios
				.get(api, {
					params: {
						list: JSON.stringify(this.listdata)
					}
				})
				// .port(api, qs.stringify(params))
				.then(res => {
					console.log(res);
				})
				.catch(err => {
					console.log(err);
				});
		},
		alladddata() {
			// 如果后端做了跨域，那vue就不用了
			var api = 'http://myapi.com/index.php/index/api/student_upload';
			this.axios
				.get(api, {
					params: {
						id: 6,
						name: 'adv',
						age: 99
					}
				})
				.then(res => {
					console.log(res);
				})
				.catch(err => {
					console.log(err);
				});
		},
		menuadddata() {
			console.log(this.menulist);
			var list = this.menulist;
			for (var i = 0; i < list.length; i++) {
				console.log(this.menulist[i]);
				// var obj = this.form_insert;
				menu_add(this.menulist[i])
					.then(res => {
						console.log(res);
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$color-white: green;

p {
	color: $color-white;
}
</style>
